<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/teacher.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
  <div class="container">
    <header>
      <div class="header-return" id="toreturn">
        <i class="iconfont">&#xe600;</i>
      </div>
      <div class="header-title">
        师资力量
      </div>
    </header>
    <section>
      <ul>

      </ul>
    </section>

  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/zepto.touch.js"></script>
  <script src="./js/lazyload.min.js"></script>
  <script>
    $(function () {
      // 返回上一页
      $('#toreturn').tap(function () {
        window.history.go(-1)
      })

      // 请求数据
      $.ajax({
        url: 'http://39.101.217.150:8075/teachers/list',
        data: {
          page: 1,
          size: 12
        },
        success: function (data) {
          // console.log(data);
          var records = data.data.records
          $.each(records, function (index, item) {
            $('section ul').append(`
            <li data-title="${item.name}">
              <img src="${item.imgurl}" alt="">
              <h3>${item.name}</h3>
              <p class="text-overflow">${item.experience}</p>
            </li>
            `)
          })
        }
      })
      // 跳转到详情页
      $('ul').on('tap', 'li', function () {
        var title = encodeURI($(this).attr('data-title'));
        // console.log(title);
        window.location.href = 'teacherDetail.html#' + title + '';
      })
    })
  </script>
</body>

</html>